<template>
  <div class="container">
    <div class="title-wrap flex-yc flex-xbt">
      <h2>全部私信</h2>
      <ul class="flex-yc">
        <li class="active">已读</li>
        <li>未读</li>
      </ul>
    </div>
    <div class="con-box">
      <letter v-for="i in 6" :key="i"></letter>
    </div>
  </div>
</template>

<script setup lang="ts">
import letter from './components/letter.vue'
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;

  .title-wrap {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f2f2f2;

    h2 {
      font-size: 20px;
      color: #021429;
    }

    ul {
      li {
        padding-bottom: 5px;
        margin-left: 28px;
        font-size: 16px;
        color: #8691a3;
        border-bottom: 2px solid transparent;

        &:hover,
        &.active {
          color: $primary;
          border-bottom-color: $primary;
        }
      }
    }
  }

  .con-box {
    padding: 0 20px;
    padding-bottom: 50px;
  }
}
</style>
